<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <title>抽奖</title>
        <link rel="stylesheet" href="{{$STATIC_URL}}css/screen.css">
        <style type="text/css">
            .circle_btn{
                    border-radius: 50%;
                    width: 140px;
                    height: 140px;
                    position: absolute;
                    box-shadow: 5px 5px 0px rgba(0,0,0,0.08);
                    cursor: pointer;
                    transition-delay: .2s;
                    webkit-transition-delay: .2s;
                    -moz-transition-delay: .2s;
                    -ms-transition-delay: .2s;
                    transition: all 1s;
                    opacity: 0;
            }

            .circle_btn.active{
                opacity: 1;
            }

            .counter-container {
                top: 20%;
            }

            .counter{
                background-color: rgba(64, 156, 151, 0.54);

            }

            .btn_name{
                margin-bottom: 53px;
                margin-top: 53px;
                color: #fff;
                text-align: center;
                font-family: Roboto;
                font-size: 34px;
                text-shadow: 0px 0px 2px rgba(255,255,255,1), 2px 2px 0px rgba(0,0,0,0.08);
            }

            #copyleft{
                left: 18%;
                right: 18%;
                top:30%;
            }

            .hangwei{
                -webkit-animation: sign-anim 2s 1s steps(30) forwards;
                -moz-animation: sign-anim 2s 1s steps(30) forwards;
                -o-animation: sign-anim 2s 1s steps(30) forwards;
                animation: sign-anim 2s 1s steps(30) forwards;
                color:#84F5F0;
                margin-top: 15px;
                text-align: center;
                font-size: 70px;
                font-family: kaiTi;
            }

            .favicon{
                width:1000px;
            }

            img{
                width:100%;
            }

            .html5_video{
                opacity: 0.9;
            }

            .result{
                width: 760px;
                height: 350px;
                background-color:rgba(7, 7, 7, 0.84);
                z-index: 9999;
                position: absolute;
                top: 37%;
                left: 20%;
                right: 20%;
                border-radius: 10px;
                font-size: 40px;
                text-align: center;
                padding: 35px 50px;
                color: #fff;
                display: none;
            }

            .lucky_prize{
                margin-top: 20px;
                margin-bottom: 20px;
            }
            .prize_img img{
                width: 260px;
            }

            #user_name{
                color: yellow;
                font-size: 50px;
                margin-left: 8px;
                margin-right: 8px;
            }

            #close button{
                float: right;
                width: 100px;
                height: 35px;
                border-radius: 5px;
                background-color: rgba(78, 160, 180, 0.53);
                font-size: 20px;
            }

            .prize_img{
                display: inline;
                float:left;
                width: 36%;
            }

            .lucky_prize{
                display:inline;
                text-align: center;
            }

            #prize_type{
                margin-top: 20px;
                width: 64%;
                float: right;
            }

            #prize_name{
                color:red;
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .company{
                padding-top: 20px;
                padding-bottom: 20px;
                font-size: 30px;
            }

            .footer {
                font-size: 30px;
                position: absolute;
                bottom: 20px;
                color: #fff;
                right: 50px;
                z-index: 9999;
            }

            .footer a{
                color: #fff;
                text-decoration: none;
            }
        </style>
    </head>
<body>
    <div id="wrapper">
        <div id="loader"> 
            <div class="inner"></div>
        </div>
        <!-- Awards panel -->
        <aside class="zone-container">
            <div class="trigger">
                <i class="icon icon-filter"></i>
            </div>

            <div class="board">
                <div class="first">
                    <h1>一等奖</h1>
                    <fieldset>
                        <legend></legend>
                    </fieldset>

                    <div class="list">
                        <p>神秘西藏之旅（可任意选择一条2014全年游侠客西藏专题线路）</p>
                        <ul class="win">
                            <li>
                                <div class="avatar"><img width="34" src="{{$STATIC_URL}}img/iphone/blank.gif"/></div>
                                <div class="num">***********</div>
                                <div class="name"></div>
                                <button class="icon icon-delete" title="删除">删除</button>
                            </li>
                        </ul>
                        <code>0/1</code>
                    </div>
                </div>
                
                <div class="second">
                    <h1>二等奖</h1>
                    <fieldset>
                        <legend></legend>
                    </fieldset>

                    <div class="list">
                        <p>大美青海之旅（可任意选择一条2014全年游侠客青海湖-敦煌环线线路）</p>
                        <ul class="win">
                            <li class="none">
                                <div class="avatar"><img width="34" src="{{$STATIC_URL}}img/iphone/blank.gif"/></div>
                                <div class="num">***********</div>
                                <div class="name"></div>
                                <button class="icon icon-delete" title="删除">删除</button>
                            </li>
                        </ul>
                        <code>0/2</code>
                    </div>
                </div>

                <div class="third">
                    <h1>三等奖</h1>
                    <fieldset>
                        <legend></legend>
                    </fieldset>

                    <div class="list">
                        <p>坝上草原之旅（可任意选择一条2014全年游侠客坝上草原线路 ）</p>
                        <ul class="win">
                            <li class="none">
                                <div class="avatar"><img width="34" src="{{$STATIC_URL}}img/iphone/blank.gif"/></div>
                                <div class="num">***********</div>
                                <div class="name"></div>
                                <button class="icon icon-delete" title="删除">删除</button>
                            </li>
                        </ul>
                        <code>0/10</code>
                    </div>
                </div>
                

                <div class="grateful">
                    <h1>感恩奖</h1>
                    <fieldset>
                        <legend></legend>
                    </fieldset>

                    <div class="list">
                        <p>华东单日游（可任意选择一条2014全年游侠客独家华东单日游线路 ）</p>
                        <ul class="win">
                            <li class="none">
                                <div class="avatar"><img width="34" src="{{$STATIC_URL}}img/iphone/blank.gif"/></div>
                                <div class="num">***********</div>
                                <div class="name"></div>
                                <button class="icon icon-delete" title="删除">删除</button>
                            </li>
                        </ul>
                        <code>0/15</code>
                    </div>
                </div>

                <div class="zero active">
                    <h1>抽奖面板</h1>
                    <fieldset>
                        <legend></legend>
                    </fieldset>

                    <div class="list">
                        <ul class="buttons">
                            <li>
                                <button class="get-first key-button" data-key=49>抽取一等奖</button>
                            </li>

                            <li>
                                <button class="get-second key-button" data-key=50>抽取二等奖</button>
                            </li>

                            <li>
                                <button class="get-third key-button" data-key=51>抽取三等奖</button>
                            </li>

                            <li>
                                <button class="stop">停止</button>
                            </li>
                        </ul>

                        <ul class="win">
                            <li>
                                <div class="avatar"><img width="34" src="{{$STATIC_URL}}img/iphone/blank.gif"/></div>
                                <div class="num">***********</div>
                                <div class="name"></div>
                                <button class="icon icon-delete" title="删除">删除</button>
                            </li>
                        </ul>
                        <code>0/1</code>
                    </div>
                </div>

            </div>
        </aside>
        
        <section id="container" class="clearfix">
            <div class="html5_video">
                <img src="{{$STATIC_URL}}img/iphone/bg.jpg">
            </div>

            <div id="copyleft">
                <div class="favicon">创新企业金融沙龙</div>
                <!-- <div class="copyright">lala</div> -->
                <div class="hangwei">杭为科技技术支持</div>
            </div>


            <section id="content" class="clearfix">
                <div class="flicker">
                    <img src="{{$STATIC_URL}}img/iphone/truth.jpg" width="150"/>
                </div>
                <div class="counter-container clearfix">
                    <div class="counter">
                        <ul class="prefix"><li>*</li><li>*</li><li>*</li></ul>
                    </div>

                    <div class="counter">
                        <ul class="none" style="padding-top: 25px;">
                            <li>*</li><li>*</li><li>*</li><li>*</li>
                        </ul>
                    </div>

                    <div class="counter">
                        <ul class="suffix"><li>*</li><li>*</li><li>*</li><li>*</li></ul>
                    </div>
                </div>

                <!--=============== 画圆圈 ====================-->
                <div id="js_btn">
                    <div class="circle_btn prize" data-key=49 style="top: 40%;left: 45%;background-color: rgba(247, 3, 3, 0.5);" >
                        <div class="btn_name" >一等奖</div>
                    </div>

                    <div class="circle_btn prize" data-key=50 style="top: 55%;left: 34%;background-color: rgba(247, 3, 3, 0.5);">
                        <div class="btn_name" >二等奖</div>
                    </div>

                    <div class="circle_btn prize" data-key=51 style="top: 55%;right: 34%;background-color: rgba(247, 3, 3, 0.5);">
                        <div class="btn_name">三等奖</div>
                    </div>

                    <div class="circle_btn stop" style="top: 75%;left: 39%;background-color: rgba(223, 240, 32, 0.5);">
                        <div class="btn_name">停止</div>
                    </div>

                    <div class="circle_btn" style="top: 75%;right: 39%;background-color: rgba(223, 240, 32, 0.5);">
                        <div class="btn_name">获奖者</div>
                    </div>
                </div>

                <!-- 抽奖结果蒙版 -->
                <div class="result" id="js_result">
                    <div class="lucky_dog">
                        恭喜<span id="user_name">XXX</span>先生/女士
                    </div>
                    <div class="company">
                        (<sapn id="company">XXX科技有限</sapn>公司)     
                    </div>
                    
                    <div class="prize_wrapper" >
                        <div class="prize_img"><img src="" id="js_img"></div>
                        <div class="lucky_prize">
                           <div id="prize_type">
                               抽中
                           </div> 
                           <div id="prize_name">
                           </div>
                        </div>
                    </div>

                    <div id="close">
                        <button type="button">关闭</button>
                    </div>
                </div>
            </section>


        </section>

        <div class="footer">
                <em style="float:right"><a href="http://www.juweitang.net/index.php?g=Wap&m=Index&a=index&token=sqcwdm1402837582">杭为科技</a>提供技术支持</em>
        </div>

    </div>

    <script type="text/javascript" src="{{$STATIC_URL}}js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="{{$STATIC_URL}}js/lottery_iphone.js"></script>
</body>
</html>

